<template>
	<view><button @click="toHome">To Home</button></view>
	<view class="">
		<button class="" @click="callHello">
			让子组件一说哈哈
		</button>
	</view>
	<view class="card">子组件一<Hello ref="hello" @onChange="helloChange"></Hello></view>
	<view class="card" >子组件二<Hello text="张三"></Hello></view>
</template>

<script setup>
import { onMounted, onUpdated, onBeforeUnmount, onActivated, onDeactivated, onBeforeMount, ref } from 'vue';
import Hello from './compontents/Hollo.vue';
const toHome = ref(() => {
	uni.navigateBack({
		delta: 1
	});
});
const hello = ref()
const callHello = ref(()=>{
	console.log(hello.value);
	hello.value.say('哈哈哈哈哈')
})
const helloChange = ref(e => {
	console.log(e,"父组件方法调用");
});
onBeforeMount(() => {
	console.log('active组件挂载前 onLaunch');
});
onMounted(() => {
	console.log('active组件被挂载 onLaunch');
});
onUpdated(() => {
	console.log('active组件更新 ');
});
onBeforeUnmount(() => {
	console.log('active组件卸载前 ');
});
onActivated(() => {
	console.log('active组件展示 onShow');
});
onDeactivated(() => {
	console.log('active组件隐藏');
});
</script>

<style>
view {
	padding: 20px;
}
</style>
